<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/index.css" rel="stylesheet"/>
    <title>数据统计</title>
</head>
<!-- 引入插件    -->
<!-- 数据整理    -->
<script src="./plugins/vue/vue.js"></script>
<script src="./plugins/axios/axios.min.js"></script>
<!-- 图表显示    -->
<script src="./plugins/echarts/echarts.min.js"></script>
<script src="./plugins/echarts/world.js"></script>
<!-- data v -->
<!-- <script src="./plugins/datav/datav.map.vue.js"></script> -->
<!-- elementui  -->
<script src="./plugins/element-ui/index.js"></script>


<body>
    <div id="app">
        <div class="top-title">数据统计</div>
        <!-- 左区域 统计数字 -->
        <div class="left-top-box box">
            <div class="project-count">
                <span class="count-title">参与项目数</span>
                <span class="count-item">1830</span>
            </div>
            <div class="user-count">
                <span class="count-title">评分用户数</span>
                <span class="count-item">3210</span>
            </div>
            
        </div>

        <!-- 评分开源项目星级占比 -->
        <div class="left-center-box box">
            <span class="rate-chart-title">开源项目星级占比</span>
            <div id="projectRateChart" ref="projectRateChart" class="project-rate-chart"></div>
        </div>

        <!-- 参与评分用户数 -->
        <div class="left-bottom-box box">
            <span class="rate-chart-title">开发者能力评比数量图</span>
            <div id="userRateChart" ref="userRateChart" class="user-rate-chart"></div>
        </div>
        <!-- 中区域 -->
        <div class="center-map box" id="world" ></div>
        <!-- 用于项目星级评比 -->
        <div class="center-bottom-box box">

        </div>

       <!-- 右区域 user rank -->
        <div class="right-box box">
            <div class="rank-title">
                <span class="user-rank-title" >用户排名</span>
                <span class="show-more">更多&nbsp;>></span>
            </div>
            <div v-for="user in users" class="rank-user-item">
                <span class="rank-user-name">{{user.name}}</span>
                <span class="rank-user-nation">{{user.nation}}</span>
                <div class="rank-user-tips">
                    <div class="rank-user-tips-item" v-for="item in user.tips">
                        {{item}}
                    </div>
                </div>
                <div class="rank-user-stars">
                    <img class="rank-user-stars-img" src="./img/index/shoucang.png">
                    <span class="rank-user-stars-num">40</span>
                </div>
                <span class="rank-user-updatetime">{{user.updateTime}}</span>
            </div>
            
        </div>
    </div>
    

 <!-- <script>
        

    </script> -->
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    users: [
                        {
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        },{
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }, {
                            date: '2016-05-04',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1517 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }, {
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1516 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1516 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }, {
                            date: '2016-05-03',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1516 弄',
                            nation: 'China',
                            updateTime: '2024-2-3 10:10:00',
                            tips: [
                                'java','spring'
                            ]
                        }
                    ]
                }
            },
            created(){

            },
            mounted(){
                this.initMapChart();
                this.initProjectRateChart();
                this.initUserRateChart();
            },
            methods: {
                initMapChart(){
                    var myChart = echarts.init(document.getElementById('world'));
        
                    option = {
                        // 图表主标题
                        // title: {
                        //     text: '世界地图', // 主标题文本，支持使用 \n 换行
                        //     //top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                        //     left: 'center', // 值: 'left', 'center', 'right' 同上
                        //     textStyle: { // 文本样式
                        //         fontSize: 18,
                        //         fontWeight: 600,
                        //         color: 'black'
                        //     }
                        // },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                // console.log(params)
                                if (params.name) {
                                    return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                                }
                            }
                        },
                        // 视觉映射组件
                        visualMap: {

                            type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                            show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
                            // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
                            // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
                            max: 20000,
                            // 文本样式
                            textStyle: {
                                fontSize: 14,
                                color: '#fff'
                            },
                            realtime: false, // 拖拽时，是否实时更新
                            calculable: true, // 是否显示拖拽用的手柄
                            // 定义 在选中范围中 的视觉元素
                            inRange: {
                                color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 图元的颜色
                            }
                        },
                        series: [
                            {
                                // name: 'World Population (2010)',
                                type: 'map',
                                mapType: 'world',
                                roam: true,
                                itemStyle: {
                                    areaColor: '#fff', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                                    borderWidth: 0.5, // 描边线宽 为 0 时无描边
                                    borderColor: '#000 ', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                                    borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                                    emphasis: {label: {show: true}}
                                },
                                label: {
                                    show: false // 是否显示对应地名
                                },
                                // nameMap: nameMap
                                // ,
                                // data: [
                                //     {name: '萨摩亚', value: 28397},
                                //     {name: '乌克兰', value: 19549.124},
                                //     {name: '越南', value: 3150.143},
                                //     {name: '新西兰', value: 8441.537},
                                //     {name: '墨西哥', value: 40374.224},
                                //     {name: '美国', value: 2963.496},
                                //     {name: '巴拿马', value: 268.065},
                                //     {name: '澳大利亚', value: 22404.488},
                                //     // {name: '中国',value: 10},
                                //     {name: 'China', value: 10},
                                //     // {name: 'United States', value: 200},

                                // ],
                                data: [
                                    {name: 'Samoa', value: 28397},
                                    {name: 'Ukraine', value: 19549.124},
                                    {name: 'Vietnam', value: 3150.143},
                                    {name: 'New Zealand', value: 8441.537},
                                    {name: 'Mexico', value: 40374.224},
                                    {name: 'United States', value: 2963.496},
                                    {name: 'Panama', value: 268.065},
                                    {name: 'Australia', value: 22404.488},
                                    {name: 'China', value: 10}
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                initProjectRateChart(){
                    var projectRateChart = echarts.init(this.$refs.projectRateChart);
                    // var projectRateChart = echarts.init(document.getElementById('projectRateChart'));

                    // option = {
                    //     title: {
                    //         text: 'Nightingale Chart',
                    //         subtext: 'Fake Data',
                    //         left: 'center'
                    //     },
                    //     tooltip: {
                    //         trigger: 'item',
                    //         formatter: '{a} <br/>{b} : {c} ({d}%)'
                    //     },
                    //     legend: {
                    //         left: 'center',
                    //         top: 'bottom',
                    //         data: [
                    //         'rose1',
                    //         'rose2',
                    //         'rose3',
                    //         'rose4',
                    //         'rose5',
                    //         'rose6',
                    //         'rose7',
                    //         'rose8'
                    //         ]
                    //     },
                    //     toolbox: {
                    //         show: true,
                    //         feature: {
                    //         mark: { show: true },
                    //         dataView: { show: true, readOnly: false },
                    //         restore: { show: true },
                    //         saveAsImage: { show: true }
                    //         }
                    //     },
                    //     series: [
                    //         {
                    //             name: 'Area Mode',
                    //             type: 'pie',
                    //             radius: [20, 140],
                    //             // center: ['75%', '50%'],
                    //             roseType: 'area',
                    //             itemStyle: {
                    //                 borderRadius: 5
                    //             },
                    //             data: [
                    //                 { value: 30, name: 'rose 1' },
                    //                 { value: 28, name: 'rose 2' },
                    //                 { value: 26, name: 'rose 3' },
                    //                 { value: 24, name: 'rose 4' },
                    //                 { value: 22, name: 'rose 5' },
                    //                 { value: 20, name: 'rose 6' },
                    //                 { value: 18, name: 'rose 7' },
                    //                 { value: 16, name: 'rose 8' }
                    //             ]
                    //         }
                    //     ]
                    // };
                    option = {
                        // title: {
                        //     text: 'Referer of a Website',
                        //     subtext: 'Fake Data',
                        //     left: 'center',
                        //     textStyle: {
                        //         color: '#fff' // 设置标题字体颜色为红色
                        //     }
                        // },
                        tooltip: {
                            trigger: 'item',
                            
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            textStyle: {
                                color: '#fff' // 设置标题字体颜色为红色
                            }
                        },
                        series: [
                            {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ],
                            emphasis: {
                                itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                            }
                        ]
                    };
                    projectRateChart.setOption(option);
                },
                initUserRateChart(){
                    var userRateChart = echarts.init(document.getElementById('userRateChart'));
                    option = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            label: {
                                    show: true, // 确保显示数值
                                    position: 'top', // 数值显示在柱子顶部
                                    color: '#fff' // 设置数值字体颜色为白色
                            },
                            }
                        ]
                    };
                    userRateChart.setOption(option);

                },

            }
        })
    </script>
    
</body>
</html>



    
